<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>Title</title>
</head>
<div>
    <input type="button" value="全选" onclick="CheckAll();">
    <input type="button" value="取消" onclick="CancelAll();">
    <input type="button" value="反选" onclick="ReverseAll();">
</div>
<body>

    <table>
        <thead>
            <tr>
                <th><input type="checkbox"></th>
                <th>ip</th>
                <th>port</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>22</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.2</td>
                <td>22</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.3</td>
                <td>22</td>
            </tr>
        </tbody>
    </table>

    <script>
        function CheckAll() {
        //获取id=tb下的tr列表
            var trList = document.getElementById('tb').children;

            //循环tr列表，并获得checkbox标签
            for(i=0;i<trList.length;i++){
                var checked = trList[i].children[0].children[0];
                //将checkbox的checked属性修改为true
                checked.checked = true;
            }

        }
        function CancelAll() {
        //获取id=tb下的tr列表
            var trList = document.getElementById('tb').children;

            //循环tr列表，并获得checkbox标签
            for(i=0;i<trList.length;i++){
                var checked = trList[i].children[0].children[0];
                //将checkbox的checked属性修改为false
                checked.checked = false;
            }

        }

        function ReverseAll() {
        //获取id=tb下的tr列表
            var trList = document.getElementById('tb').children;

            //循环tr列表，并获得checkbox标签
            for(i=0;i<trList.length;i++){
                var checked = trList[i].children[0].children[0];

                //判断checkbox的checked属性
                if(checked.checked){
                    checked.checked = false;
                }else{
                    checked.checked = true;
                }
            }

        }
    </script>
</body>
</html>